<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { onMounted, ref, defineEmits } from "vue";
import { tableData1 } from "../info/exolainJson";
import appDoalog from "./dialog.vue";
let $emit = defineEmits(["submitClick", "closeClick"]);
import { useRouter } from "vue-router";
const router = useRouter();
const columns = ref([
  {
    prop: "sort",
    label: "服务领域",
    align: "center"
  },
  {
    label: "项目编号",
    prop: "number",
    align: "center",
    minWidth: "110"
  },
  {
    prop: "name",
    label: "项目名称",
    showOverflowTooltip: true
  },
  {
    prop: "unit",
    label: "承接单位",
    align: "center",
    showOverflowTooltip: true
  },
  {
    prop: "createTime",
    label: "执行时间",
    width: "190",
    align: "center",
    slot: "createTime"
  },
  {
    prop: "money",
    label: "金额",
    align: "center",
    slot: "money"
  },

  {
    prop: "status",
    label: "状态",
    align: "center",
    slot: "status"
  },

  {
    prop: "operation",
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
]);
const tableData = ref(tableData1);

const num = Array.from(new Set(tableData1.map(item => item.type)));
function flatByFor(arr) {
  const res = [];

  for (let i = 0; i < arr.length; i++) {
    arr[i]?.children?.length
      ? res.push(...flatByFor(arr[i].children))
      : res.push(arr[i]);
  }
  return res;
}
const appDoalogRef = ref("");
const submitClick = form => {
  tableData.value.push(form);
};
const submitsub = form => {
  const index = tableData.value.findIndex(item => item.id === form.parentId);
  tableData.value[index]["children"].push(form);
};
import { ElMessage, ElMessageBox } from "element-plus";
const deleteClick = (row, index) => {
  ElMessageBox.confirm("是否删除？", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      tableData.value.splice(index, 1);
      ElMessage({
        type: "success",
        message: "删除成功!"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消"
      });
    });
};
</script>

<template>
  <div class="text-[20px] font-bold mt-[20px] mb-[20px] w-full">
    子项目清单
    <el-button
      type="primary"
      class="float-right"
      plain
      :icon="Plus"
      size="small"
      @click="appDoalogRef.init(true)"
      >新增</el-button
    >
  </div>

  <el-text class="mx-1">
    合计 <span class="font-medium" style="color: #f56c6c">{{ num.length }}</span
    >大类
    <span class="font-medium" style="color: #f56c6c">
      {{ tableData.length }}</span
    >
    个大项目,
    <span class="font-medium" style="color: #f56c6c">{{
      flatByFor(tableData1).length
    }}</span
    >个小项目
  </el-text>
  <pure-table
    class="mt-[10px]"
    :data="tableData"
    :columns="columns"
    border
    :header-cell-style="{
      textAlign: 'center',
      background: '#f5f7fa'
    }"
  >
    <template #createTime="{ row }">
      <span>{{ row.createTime.join("至") }}</span>
    </template>
    <template #money="{ row }">
      <span :class="{ 'font-medium': row.children }">{{ row.money }}</span>
    </template>
    <template #status="{ row }">
      <el-tag type="primary">{{ row.status }}</el-tag>
    </template>
    <template #operation="{ row, index }">
      <el-button type="primary" link @click="appDoalogRef.init(true, row)"
        >编辑</el-button
      >
      <el-button type="primary" link @click="deleteClick(row, index)"
        >删除</el-button
      >
      <!-- <el-button
          type="primary"
          link
          @click="router.push('/project/approvalInfo')"
          >详情</el-button
        >
        <el-button type="primary" link>编辑</el-button> -->
    </template>
  </pure-table>
  <div class="h-[40px]"></div>
  <div
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="$emit('closeClick')">取消</el-button>
    <el-button @click="$emit('closeClick')">保存草稿</el-button>
    <el-button type="primary" @click="$emit('submitClick', 1)"
      >上一步</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 3)"
      >下一步</el-button
    >
  </div>
  <appDoalog
    ref="appDoalogRef"
    @submitClick="submitClick"
    @submitsub="submitsub"
  />
</template>

<style lang="scss" scoped></style>
